<script lang="ts" setup>
import {computed, onMounted, ref} from 'vue'
import Toolbar from '@/components/bpmnjs/components/Toolbar'
import Palette from '@/components/bpmnjs/components/Palette'
import Designer from '@/components/bpmnjs/components/Designer'
import Panel from '@/components/bpmnjs/components/Panel'
import Setting from '@/components/bpmnjs/components/Setting'
import ContextMenu from '@/components/bpmnjs/components/ContextMenu/index.vue'
import {EditorSettings} from '@/components/bpmnjs/types/editor/settings'
import {defaultSettings} from '@/components/bpmnjs/config'

import hljs from 'highlight.js/lib/core'
import xml from 'highlight.js/lib/languages/xml'
import json from 'highlight.js/lib/languages/json'
import {NConfigProvider} from 'naive-ui'

hljs.registerLanguage('xml', xml)
hljs.registerLanguage('json', json)
const editorSettings = ref<EditorSettings>({...defaultSettings})
const processXml = ref<string | undefined>(undefined)
const customPalette = computed<boolean>(() => editorSettings.value.paletteMode === 'custom')
const customPenal = computed<boolean>(() => editorSettings.value.penalMode === 'custom')
const showToolbar = computed<boolean>(() => editorSettings.value.toolbar)
const computedClasses = computed<string>(() => {
  const baseClass = ['designer-container']
  customPalette.value && baseClass.push('designer-with-palette')
  customPenal.value && baseClass.push('designer-with-penal')
  editorSettings.value.bg === 'grid-image' && baseClass.push('designer-with-bg')
  editorSettings.value.bg === 'image' && baseClass.push('designer-with-image')

  return baseClass.join(' ')
})
const d = ref([processXml, 'xml']);
const s = ref([editorSettings.value, 'settings']);
onMounted(() => {
  document.body.addEventListener('contextmenu', function (ev) {
    ev.preventDefault()
  })
})
const setting = ref();

</script>

<template>
  <NConfigProvider abstract :componentOptions="{ DynamicInput: { buttonSize: 'small' }}" :hljs="hljs">
    <NDialogProvider>
      <div :class="computedClasses" id="designer-container">
        <NMessageProvider>
          <Toolbar v-if="showToolbar"/>
          <div class="main-content">
            <Palette v-if="customPalette"></Palette>
            <Designer v-model="d"></Designer>
            <Panel v-if="customPenal"></Panel>
            <div v-if="!customPenal" class="camunda-penal" id="camunda-penal"></div>
          </div>
          <Setting v-model="s"></Setting>
          <ContextMenu></ContextMenu>
        </NMessageProvider>
      </div>
    </NDialogProvider>
  </NConfigProvider>
</template>


<style scoped>
</style>
